import { Form, Input, Button, Tabs, Row, Col } from 'antd';
import { Link } from 'react-router-dom'
import React from 'react';
import './style.scss';
// import { fetchLogin } from "@/api/user";
import { login } from "@/store/action";
import { useDispatch } from 'react-redux';

const { TabPane } = Tabs;

function callback(key) {
  console.log(key);
}

export default function Login() {
  const dispatch = useDispatch()

  const onFinish = (values) => {
    console.log('Received values of form: ', values);
    // 不优雅 ↓
    // fetchLogin(values).then(res=>{
    //   console.log('res:',res)
    // })

    // 派发异步action
    dispatch(login(values))
  };

  return (
    <div className={'bg'}>
      <div className={'login_card'}>
        <Tabs type="card" defaultActiveKey="1" onChange={callback} centered style={{ margin: '0 auto' }}>
          <TabPane tab="账户密码登录" key="1">
            <Form
              name="normal_login"
              className="login-form"
              initialValues={{ remember: true }}
              onFinish={onFinish}
            >
              <Form.Item
                name="username"
                rules={[{ required: true, message: '请输入手机号 / 用户名!' }]}
                style={{ borderBottom: '1px solid #DCDCDC' }}
              >
                <Input placeholder="请输入手机号 / 用户名" bordered={false} />
              </Form.Item>
              <Form.Item
                name="password"
                rules={[{ required: true, message: '请输入密码!' }]}
                style={{ borderBottom: '1px solid #DCDCDC' }}
              >
                <Input
                  bordered={false}
                  type="password"
                  placeholder="请输入密码"
                />
              </Form.Item>

              <Form.Item>
                {/* <a style={{ color: '#8C8D9B' }} href="">创建账号</a> */}
                <Link to={'/register'}>创建账号 </Link>
              </Form.Item>

              <Form.Item>
                <Button type="primary" htmlType="submit" block style={{ height: '56PX', borderRadius: '12PX' }}>
                  登录
                </Button>
              </Form.Item>
            </Form>

          </TabPane>

          <TabPane tab="验证码登录" key="2">
            <Form
              name="normal_login"
              className="login-form"
              initialValues={{ remember: true }}
              onFinish={onFinish}
            >
              <Form.Item
                name="phone"
                rules={[{ required: true, message: '请输入手机号!' }]}
                style={{ borderBottom: '1px solid #DCDCDC' }}
              >
                <Input placeholder="请输入手机号" bordered={false} />
              </Form.Item>
              <Form.Item
                name="captcha"
                rules={[{ required: true, message: '请输入验证码!' }]}
                style={{ borderBottom: '1px solid #DCDCDC' }}
              >
                <Row>
                  <Col span={18}>
                    <Input
                      bordered={false}
                      type="password"
                      placeholder="请输入验证码"
                    />
                  </Col>
                  <Col span={6} style={{ float: 'right' }}>
                    <Button type="link" style={{ color: '#151830', fontWeight: 'bold' }}>发送验证码</Button>
                  </Col>
                </Row>
              </Form.Item>


              <Form.Item>
                {/* <a style={{ color: '#8C8D9B' }} href="">创建账号</a> */}
                <Link to={'/register'}>创建账号 </Link>
              </Form.Item>

              <Form.Item>
                <Button type="primary" htmlType="submit" block style={{ height: '56PX', borderRadius: '12PX' }}>
                  登录
                </Button>
              </Form.Item>


            </Form>

          </TabPane>

        </Tabs>

        {/* <Button size="large" shape="circle"><img src="./weixin.jpg" alt="微信图片" /></Button> */}

      </div>
      {/* <Footer className={'footer'}>
        <div>
          底部说明
        </div>
      </Footer> */}
    </div>
  )
}
